<template>
    <footer>
        <ul>
            <RouterLink custom v-slot="{ isActive, navigate }" v-for="item in paths" :to="item.path" :key="item.path">
                <li @click="navigate(item.path)" :class="isActive ? 'active' : ''">
                    <span> {{ item.content }}</span>
                    <span><van-icon :name="item.icon" /></span>
                </li>
            </RouterLink>
        </ul>
    </footer>
</template>

<script>
import auth from '@/utils/auth';

export default {
    data() {
        return {
            paths: [
                { path: "/home", content: "首页", icon: 'wap-home-o' },
                { path: "/kind", content: "分类", icon: 'apps-o' },
                { path: "/cart", content: "购物车", icon: "shopping-cart-o" },
                { path: "/my", content: "我的", icon: "manager-o" }
            ]
        }
    },
    mounted() {
        this.pathsMap()
    },
    methods: {
        pathsMap() {
            this.paths = this.paths.map((item) => {
                if (item.path=='/my') {
                    return { ...item, content: auth.isLoggedIn() ? "我的" : "未登录" }
                }
                return item
            })
        }
    }
}
</script>

<style scoped lang="less">
.active {
    background-color: orange;
    color: red;
}

footer ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;

    li {
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }
}
</style>